<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证贵美网站的注册页面</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				
				width: 800px;
			}

			div {
				margin-top: 16px;
			}

			form {
				margin-left: 30px;
			}

			label {
				display: inline-block;
				width: 160px;
				
				text-align: right;
			}

			span {
				font-size: 12px;
				color: red;
				margin-left: 3px;
			}
		</style>
	</head>
	<body>
		<div>
			<h3>注册</h3>
		</div>
		<form action="../day1/first.html">
			<div><label>名字：</label><input type="text" name="firstname" required><span></span></div>
			<div><label>姓氏：</label><input type="text" name="lastname" required><span></span></div>
			<div><label>登陆名：</label><input type="text" name="uname" required><span style="color: black;">(可包含a-z，0-9和下划线)</span>
			</div>
			<div><label>密码：</label><input type="password" name="pass" required><span></span></div>
			<div><label>再次输入密码：</label><input type="password" name="pass1" required><span></span></div>
			<div><label>电子邮箱：</label><input type="email" name="em" required><span></span></div>
			<div><input type="submit" name="zc" value="注册"></div>
		</form>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			var fn = /^[\u4e00-\u9fa5]{1,3}$/;
			var ln = /^[\u4e00-\u9fa5]{1,2}$/;
			var un = /^[a-z0-9_]{8,16}$/;
			$(function() {
				$("input[name='firstname']").blur(function() {
					if (!fn.test($(this).val())) {
						$(this).next().html("名字不能为空,只能使用汉字空且不能超过3个汉字");
					}else{
						$(this).next().hide();
					}
				});
				$("input[name='lastname']").blur(function() {
					if (!ln.test($(this).val())) {
						$(this).next().html("姓氏不能为空,不能超过2个汉字只能使用汉字");
					}else{
						$(this).next().hide();
					}
				});
				$("input[name='pass']").blur(function() {
					if ($(this).val().length < 6) {
						$(this).next().html("密码长度必须大于等于6个字符");
					}else{
						$(this).next().hide();
					}
				});
				$("input[name='pass1']").blur(function() {
					if ($(this).val()!=$("input[name='pass']").val()) {
						$(this).next().html("两次输入的密码必须相同").show();
					}else{
						$(this).next().hide();
					}
				});
				$("input[name='zc']").click(function(){
					
				})
			});
		</script>
	</body>
</html>
